<template>
  <view>
    <wrap class="icon-wrap">
      <image class="getCode-icon" src="/static/logo.png"></image>
    </wrap>
    <wrap class="phone-warp">
      <h2>{{ phoneNum }}</h2>
    </wrap>
    <view class="layout">
      <view class="inpList-warp" @tap="KeyboarOpen">
        <password-input
          :plaintext="plaintext"
          :numLng="password"
        ></password-input>
      </view>
    </view>
    <wrap>
      <div
        class="reGetCode"
        :class="isDisable ? '' : 'disabled'"
        @click="reGetCode"
      >
        {{ btnMsg }}
      </div>
    </wrap>
    <wrap>
      <div class="login-btn" @click="login">确定</div>
    </wrap>

    <number-keyboard
      tabBar
      @confirm="login"
      ref="KeyboarHid"
      @input="save"
      psdLength="6"
    ></number-keyboard>
    <van-notify id="van-notify" />
    <van-toast id="van-toast"></van-toast>
  </view>
</template>

<script>
import numberKeyboard from "@/components/number-keyboard/number-keyboard.vue";
import passwordInput from "@/components/password-input/password-input.vue";
import { user_login, user_getCode } from "@/api/user.js";
import { setToken } from "@/utils/cookie.js";
export default {
  data() {
    return {
      inpList: [],
      plaintext: false,
      password: "", //输入的内容
      isDisable: false,
      phoneNum: "", //获取到的手机号
      btnMsg: "重新获取验证码",
      timeOut: 60, //重新获取验证码时间
    };
  },
  components: {
    numberKeyboard,
    passwordInput,
  },
  onLoad(e) {
    this.phoneNum = e.phoneNum;
    //因为此时实例没有挂载完成，需要延迟操作
    setTimeout(() => {
      this.$refs.KeyboarHid.open();
    }, 50);
    this.getTimmer(this.timeOut);
  },
  methods: {
    //打开键盘
    KeyboarOpen(e) {
      this.$refs.KeyboarHid.open();
    },
    //输入的值
    save(val) {
      this.password = val;
    },
    async reGetCode() {
      this.isDisable = false;
      user_getCode({
        phoneNum: this.phoneNum,
      }).then((res) => {
        this.getTimmer(this.timeOut);
      });
    },

    async login() {
      if (this.password.length < 6) {
        this.$toast.fail("请输入验证码");
        return;
      }
      let res = await user_login({
        phoneNum: this.phoneNum,
        verifyCode: this.password,
      });
      console.log("登录", res);
      if (!res) {
        this.$toast.fail("验证码错误");
        return;
      }
      this.$toast({
        type: "success",
        message: "登录成功",
        timeout: 1000,
        onClose: () => {
          let { accessToken, refreshToken } = res;
          setToken("accessToken", accessToken);
          setToken("refreshToken", refreshToken);
          uni.navigateTo({
            url: "../home/home",
          });
        },
      });
    },
    // 倒计时
    getTimmer(time) {
      this.timmer = setInterval(() => {
        time--;
        this.btnMsg = `重新获取验证码（${time}s）`;
        if (time <= 0) {
          this.resetGetCode = !this.resetGetCode;
          this.isDisable = true;
          this.btnMsg = `重新获取验证码`;
          clearInterval(this.timmer);
          this.timmer = null;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
